<template>
  <div class="login_container">
    <div class="login_box_container">
      <div class="login_box_wrapper">
        <div class="login_box_logo">
          <div class="login_box_logo_container">
            <el-avatar :src="logo"
            :size="80"></el-avatar>
          </div>
        </div>
        <div class="login_box_input_container">
          <div class="login_box_input_wrapper">
            <div class="loin_box_input">
              <div>
                <el-input
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
                v-model="userName">
                </el-input>
              </div>
              <div>
                <el-input
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                v-model="password"
                @blur="onBlurPassword">
                </el-input>
              </div>
              <div class="login-input_button_container">
                <el-button type="primary" 
                size="small" @click="onClickLogin">登录</el-button>
                <el-button type="info" 
                size="small"
                @click="onClickReset">重置</el-button>
              </div>  
            </div>
          </div>
        </div>    
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      logo:require("../assets/logo.png"),
      userName:"",
      password:""
    }
  },
  methods:{
    onBlurPassword(){
      if(this.password.length === 0){
        this.$message('请输入密码');
        return;
      }
    },
    onClickLogin(){
      if(this.userName.length ===0 || this.password.length === 0){
        this.$message("请输入用户名或者密码")
        return;
      }

      this.$axios.get("https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey",{
        params:{
          mobile:this.userName,
          pwd:this.password
        }
      }).then((res)=>{
        console.log(res)
        var message = res.data.msg;
        this.$message(message);
        if(res.data.code === 0){
          var token = res.data.data.token;
          window.localStorage.setItem("token",token);
          this.$router.push("/");
        }
        this.userName = "";
        this.password = ""
      }).catch((error)=>{
        console.log(error)
      })
    },
    onClickReset(){
      this.userName = "";
      this.password = ""
    }
  },
  mounted(){
    console.log(this.logo)
  }
}
</script>

<style scoped>
.login_container
{
  width: 100vw;
  height: 100vh;
  background-color: rgb(44, 75, 105);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.login_box_container
{
  width: 50%;
  height: 400px;
  /* background-color: white; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.login_box_wrapper
{
  width: 80%;
  height: 80%;
  /* border: 1px solid red; */
  position: relative;
}
.login_box_logo
{
  width: 100%;
  height: 120px;
  position: absolute;
  top: 0;
  z-index: 999;
}

.login_box_logo_container
{
  width: 100%;
  height: 120px;
  /* border: 1px solid blue; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* background-color: yellow; */
}

.login_box_input_container
{
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 260px;
  width: 100%;
  /* background-color: red; */
  background-color: white;
}

.login_box_input_wrapper
{
  width: 100%;
  height: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  /* background-color: yellow; */
}

.loin_box_input
{
  width: 80%;
  height: 180px;
  /* background-color: red; */
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  /* background-color: blue; */
  /* align-self: stretch; */
}

.loin_box_input div
{
  width: 100%;
  /* margin-top: 10px; */
}

.login-input_button_container
{
  width: 80%;
  margin-top: 20px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  /* background-color: red; */
}
</style>